<template>
  <div ref="myChart" id="myChart" :style="{ width: '800px', height: '400px' }"></div>
</template>

<script>
import { getCurrentInstance, onMounted } from 'vue';

export default {
  setup() {
    // 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
    let internalInstance = getCurrentInstance();
    let echarts = internalInstance.appContext.config.globalProperties.$echarts;

    onMounted(() => {
      const dom = document.getElementById('myChart');
      const myChart = echarts.init(dom); // 初始化echarts实例
      const option = {
        // 设置背景色
        backgroundColor: 'rgba(8, 22, 34, 1)',

        title: {
          text: '日用水量',
          subtext: '(每周)',
          left: 'left',
          top: 5, // 定位
          left: 16,
          // 定位
          textStyle: {
            color: '#00FFFF',
            fontSize: 20,
          },
          subtextStyle: {
            // 副标题样式
            color: "#00FFFF",
            fontSize: 16,
          },
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          top: '16%',   // 等价于 y: '16%'
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },

        tooltip: {    //提示框组件   
          trigger: 'item',
          lineStyle: {
            color: "#000",
            width: 0.5,
            type: "solid",
          },
        },

        xAxis: {
          name: '时间',
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#00FFFF'
            }
          },
        },
        yAxis: {
          //name: '用水量(ml)',
          type: 'value',
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: '#00FFFF'
            }
          },
          splitNumber: 6,
          splitLine: {
            show: false,
          }
        },
        series: [
          {
            name: '用水量',
            //数据
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: 0,
            // 设置拐点为实心圆
            // symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: '#00FFFF',
                // 拐点上显示数值
                label: {
                  show: true
                },
                lineStyle: {
                  width: 4,  // 设置线宽
                  type: 'solid',//虚实
                  // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
                  color: '#00FFFF'
                }
              }  
            },emphasis: {
                itemStyle: {
                  color: '#0dff0d' // hover状态下的拐点颜色
                }
              }
          }
        ]
      };
      // 设置实例参数
      myChart.setOption(option);
    });
    return {};
  }
};
</script>